<script setup>
import { ref, reactive, onBeforeMount ,watch} from 'vue'
import { useIndexStore } from '../../pinia'


let state = useIndexStore()

let Menutitle = reactive(['菜单名称', '菜单状态', '显示状态', '创建时间', '操作'])
let Menulist = reactive([])
let chatater = ref('')
//展开
let expand = (index) => {
    Menulist[index].iconShow = true
}
//收缩
let putaway = (index) => {
    Menulist[index].iconShow = false

}
watch(state, (newV) => {
    if (newV.role == 0) {
        Menulist = newV.navRouter0
    } else if (newV.role == 1) {
        Menulist = newV.navRouter1
    } else {
        Menulist = newV.navRouter2
    }
})
onBeforeMount(() => {
    if (state.role == 0) {
        Menulist = state.navRouter0
    } else if (state.role == 1) {
        Menulist = state.navRouter1
    } else {
        Menulist = state.navRouter2
    }
})



</script>

<template>
    <div class="Menutitle">
        <ul class="Menutitle_ul">
            <li v-for='(item, index) in Menutitle' :key="item">{{ item }}</li>
        </ul>

        <ul class="Menulist_ul">
            <li v-for="(item, index) in Menulist" :key="item.id">
                <div class="inside_p">
                    <p>
                        <span class="iconfont icon-jiahaozhankai" v-show="!item.iconShow" @click="expand(index)"></span>
                        <span class="iconfont icon-jianhaoshouqi" v-show="item.iconShow" @click="putaway(index)"></span>
                        {{ item.title }}
                    </p>
                    <p>{{ item.status }}</p>
                    <p>{{ item.shows ? "显示" : "影藏" }}</p>
                    <p>{{ item.times }}</p>
                    <p>{{ item.operation }}</p>
                </div>
                <div class="inside_ul" :style="{ height: item.iconShow ? '100%' : '0' }">
                    <div v-for="(itemz, indexz) in item.lieBiao" :key="indexz">
                        <p>{{ itemz }}</p>
                        <p>{{ item.status }}</p>
                        <p>{{ item.shows ? "显示" : "影藏" }}</p>
                        <p>{{ item.times }}</p>
                        <p>
                            <router-link :to="item.url[indexz]"><span style="color:#1890ff">查看</span></router-link>
                        </p>
                    </div>
                </div>
            </li>

        </ul>
    </div>
</template>

<style scoped lang="less">
.Menutitle {
    display: flex;
    flex-direction: column;
    height: calc(100% - 85px);
    overflow-y: auto;
}

.Menutitle_ul {
    background-color: #fafafa;
    display: flex;
    flex-shrink: 0;
    height: 35px;
    justify-content: space-around;
    border-bottom: 0.5px solid #cecece;
    padding: 20px 0 0;

    li {
        font-size: 14px;
    }
}

.Menulist_ul {
    font-size: 14px;

    li {
        // height: 55px;
        display: flex;
        flex-direction: column;
        line-height: 55px;
        border-bottom: 1px solid #eee7e7;
        position: relative;

        .inside_p {
            display: flex;
            justify-content: space-around;
            margin-left: 3%;

            p {
                width: 10%;
            }

            p:nth-child(2),
            p:nth-child(3),
            p:nth-child(4),
            p:nth-child(5),
            p:nth-child(6) {
                text-align: center;
            }

            p:nth-child(2) {
                margin-left: -4%;
            }
        }

    }
}


.inside_ul {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 0;

    div {
        display: flex;
        height: 55px;
        line-height: 55px;
        border-bottom: 1px solid #eee7e7;
        justify-content: space-around;

        p {
            width: 15%;
        }

        p:nth-child(1) {
            margin-left: 8%;
        }

        p:nth-child(2),
        p:nth-child(3),
        p:nth-child(4),
        p:nth-child(5),
        p:nth-child(6) {
            text-align: center;
        }

        p:nth-child(2) {
            margin-left: -8%;
        }
    }
}
</style>